<template>
  <div class="container-login">
      <el-card>
          <img src="../../assets/images/logo_index.png" alt="">
          <!-- 表单 -->
          <el-form ref="loginForm" :model="loginForm" :rules="loginRules" status-icon>
              <el-form-item prop="mobile">
                  <el-input v-model="loginForm.mobile" placeholder="请输入手机号"></el-input>
              </el-form-item>
              <el-form-item prop="code">
                  <el-input style="width:240px;margin-right:8px" v-model="loginForm.code" placeholder="请输入验证码"></el-input>
                  <el-button>发送验证码</el-button>
              </el-form-item>
              <el-form-item>
                  <!-- :value="true" 复选框默认选择，且不能修改。 若v-model则能双向绑定修改 -->
                  <el-checkbox :value="true">我已阅读并同意用户隐私协议条款</el-checkbox>
              </el-form-item>
              <el-form-item>
                  <el-button style="width:100%" type="primary" @click="login()">登 录</el-button>
              </el-form-item>
          </el-form>
     
      </el-card>
  </div>
</template>

<script>
import auth from '@/utils/auth'
export default {
    name:'page-login',
    data(){
        //自定义校验函数
        const checkMobile = (rule,value,callback)=> {
            //value是待校验的数据
            //callback 校验完毕后调用回调函数
            //手机号规则： 必须1开头，第二位是3-9之间，9个数字结尾
            if(/^1[3-9]\d{9}$/.test(value)){
                callback()
            }else{
                callback(new callback('手机号格式不正确'))
            }
        }

        return{
            //表单数据对象,mobile和code是固定的，后台需要的字段名称
            loginForm:{
                mobile:'',
                code:'',
            },
            //校验规则对象
            loginRules:{
                mobile:[
                    { required: true, message: '请输入手机号', trigger: 'blur' },
                    //自定义手机号校验规则
                    {validator:checkMobile, trigger:'blur'}

                ],
                code:[
                    { required: true, message: '请输入验证码', trigger: 'blur' },
                    {len:6, message:'验证码是6个字符', trigger: 'blur'}
                ]
            }
        }
    },
    methods:{
        login() {
            //整体表单校验
            this.$refs.loginForm.validate(async valid => {
                //valid代表是否校验成功
                if(valid){
                    // //进行登录
                    // this.$http.post('authorizations',this.loginForm)
                    // .then(res =>{
                    //     //res.data是后台返回的数据
                    //     // console.log(res.data);

                    //     //成功：保存用户信息
                    //     //res.data.data是用户信息对象
                    //     auth.setUser(res.data.data)

                    //     //登录成功后，跳转到首页
                    //     this.$router.push('/')

                    // }).catch(e=>{
                    //     //失败：提示：手机号或验证码错误
                    //     console.log('登录失败');
                    //     this.$message.error('手机号或验证码错误');
                    // })
                    //==================================================
                   //当某段代码可能会出现报错出现异常，捕获这段代码的异常，进而去进行异常处理
                   //将要使用 try{ 可能报错的代码片段  }catch(e){  对异常进行处理的代码  } 进行异常捕获和异常处理
                   try{
                       const res = await this.$http.post('authorizations',this.loginForm)
                        auth.setUser(res.data.data)
                        this.$router.push('/')
                   } catch(e){
                       this.$message.error('手机号或验证码错误');
                   }
                   
                
                
                }
            })
        }
    }
}
</script>

<style scoped lang='less'>
    .container-login{
        width: 100%;
        height: 100%;
        position:absolute;
        left: 0;
        top: 0;
        background:url(../../assets/images/login_bg.jpg) no-repeat center / cover;
        //el-card是组件，解析后不存在el-card标签，所以标签选择器不能用
        .el-card{
            width: 400px;
            height: 350px;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            img{
                display: block;
                margin: 0 auto;
                width: 200px;
            }
        }
    
    }
</style>